<template>
  <div>
    <el-form
      ref="searchForm"
      class="ele-form-search"
      :inline="true"
      :model="searchData"
    >
      <el-form-item>
        <el-input
          v-model="searchData.APPLY_NUM"
          clearable
          placeholder="申请单号"
        />
      </el-form-item>
      <el-form-item>
        <el-date-picker
          v-model="searchData.TRANS_DATE"
          placeholder="用血日期"
          type="date"
          value-format="yyyy-MM-dd"
        />
      </el-form-item>
      <el-form-item>
        <el-button
          class="ele-btn-icon"
          icon="el-icon-search"
          type="primary"
          @click="search"
        >
          查询
        </el-button>
        <el-button type="default" @click="reset('searchForm')">重置</el-button>
      </el-form-item>
    </el-form>
    <div>
      <el-table
        border
        :data="tableData"
        stripe
        @row-dblclick="selectBloodApply"
      >
        <el-table-column align="center" label="编号" width="80">
          <template #default="scope">
            {{ scope.$index + 1 }}
          </template>
        </el-table-column>
        <el-table-column
          align="center"
          label="申请单号"
          prop="APPLY_NUM"
          width="100"
        />
        <el-table-column align="center" label="申请科室" prop="DEPT_NAME" />
        <el-table-column
          align="center"
          label="门诊号"
          prop="PATIENT_ID"
          width="100"
        />
        <el-table-column
          align="center"
          label="血型"
          prop="PAT_BLOOD_GROUP"
          width="100"
        />
        <el-table-column align="center" label="申请时间" prop="GATHER_DATE" />
        <el-table-column align="center" label="用血时间" prop="TRANS_DATE" />
      </el-table>
    </div>
  </div>
</template>

<script>
  import { getCurrentTime } from '@/utils'
  import { PLAK0010 as getList } from '@/api/client'
  import { mapGetters } from 'vuex'
  export default {
    data() {
      return {
        searchData: {
          TRANS_DATE: this.getCurrentDate(),
          APPLY_NUM: '',
        },
        listObj: {},
        tableData: [],
        listQuery: { TRANS_DATE: this.getCurrentDate(), APPLY_NUM: '' },
      }
    },
    computed: {
      ...mapGetters({
        depts: 'initialData/depts',
      }),
    },
    created() {
      this.getList()
    },
    methods: {
      async getList() {
        const res = await getList(this.listQuery)
        if (res.errorCode === 0) {
          this.tableData = res.data.map((val) => {
            val.DEPT_NAME =
              (this.depts[val.DEPT_CODE] &&
                this.depts[val.DEPT_CODE]['DEPT_NAME']) ||
              ''
            return val
          })
        }
      },
      search() {
        Object.assign(this.listQuery, this.searchData)
        this.getList()
      },
      reset() {
        this.listQuery = {
          TRANS_DATE: this.getCurrentDate(),
        }
        this.getList()
      },
      selectBloodApply(row) {
        this.$emit('selectBloodApply', row)
      },
      getCurrentDate() {
        return getCurrentTime().substr(0, 10)
      },
    },
  }
</script>

<style lang="scss" scoped></style>
